<template>
	<div style="height: 100%;overflow-y: hidden;overflow-x: hidden;">
		<div style="padding: 10px;border-radius: 16px;background: #fff;margin-bottom: 10px;" class="displayFlexBet">
			<div class="displayFlex">
				<div class="date-item displayFlex">
					<el-select v-model="params.equipmentId" filterable remote placeholder="选择生产设施" :remote-method="remoteMethod"
						:loading="loading" @change="getWholeProductionEquipmentDateStandingBookList">
						<el-option v-for="item in productionList" :key="item.id" :label="item.equipmentName" :value="item.id">
						</el-option>
					</el-select>
					<i class="el-icon-caret-bottom" style="margin-bottom: 6px;color: #999;"></i>
				</div>

				<div class="date-item displayFlex" style="margin-left: 20px;">
					<el-date-picker v-model="params.year" type="year" placeholder="选择年" format="yyyy"
						style="border-radius: 40px;width: 60px;text-align: center;" :clearable="false" value-format="yyyy"
						@change="getWholeProductionEquipmentDateStandingBookList">
					</el-date-picker>
					<i class="el-icon-caret-bottom" style="margin-bottom: 6px;color: #999;"></i>
				</div>

				<div class="date-item displayFlex" style="margin-left: 20px;">
					<el-date-picker v-model="params.month" type="month" placeholder="选择月"
						style="border-radius: 40px;width: 60px;text-align: center;" :clearable="false" format="MM" value-format="MM"
						@change="getWholeProductionEquipmentDateStandingBookList">
					</el-date-picker>
					<i class="el-icon-caret-bottom" style="margin-bottom: 6px;color: #999;"></i>
				</div>
			</div>


			<el-button type="primary" icon="el-icon-download" size="small" @click="exportExcle">
				导出台账
			</el-button>
		</div>

		<div style="background: #fff;padding: 20px;border-radius: 16px;height: calc(100% - 80px);">
			<el-table :data="tableData" style="width: 100%;" height="100%" size="mini" :span-method="arraySpanMethod">
				<el-table-column label="生产设施" prop="equipmentName">
				</el-table-column>
				<el-table-column label="编码" prop="equipmentNo">
				</el-table-column>
				<el-table-column label="生产设施型号" prop="equipmentModel">
				</el-table-column>
				<el-table-column label="主要生产设施(设 备)规格参数(2)" width="290">
					<el-table-column prop="parameterName" label="参数名称" width="80">
					</el-table-column>
					<el-table-column prop="designValueStr" label="设计值" width="60">
					</el-table-column>
					<el-table-column prop="actualValue" label="实际" width="60">
					</el-table-column>
					<el-table-column prop="unitValue" label="单位" width="60">
						<!-- <template slot-scope="scope">
							<div>% </div>
						</template> -->
					</el-table-column>
				</el-table-column>
				<el-table-column label="设计生产能力">
					<el-table-column prop="equipmentProductivity" label="生产能力">
					</el-table-column>
					<el-table-column prop="unitValue" label="单位">
					</el-table-column>
				</el-table-column>
				<el-table-column label="运行状态">
					<el-table-column prop="startTimeStr" label="开始时间">
					</el-table-column>
					<el-table-column prop="endTimeStr" label="结束时间">
					</el-table-column>
				</el-table-column>
				<el-table-column label="生产负荷" prop="loadPercent">
					<template slot-scope="scope">
						<div v-if="scope.row">{{scope.row.loadPercent}}% </div>
					</template>
				</el-table-column>
				<el-table-column label="产品产量">
					<el-table-column prop="totalSemiProductQty" label="中间产品">
					</el-table-column>
					<el-table-column prop="semiProductUnitValue" label="单位">
					</el-table-column>
					<el-table-column prop="totalFinalProductQty" label="最终产品">
					</el-table-column>
					<el-table-column prop="finalProductUnitValue" label="单位">
					</el-table-column>
				</el-table-column>

				<el-table-column label="原辅料">
					<el-table-column prop="materialName" label="名称">
					</el-table-column>
					<el-table-column prop="" label="种类">
					</el-table-column>
					<el-table-column prop="qty" label="用量">
					</el-table-column>
					<el-table-column prop="unitValue" label="单位">
					</el-table-column>
					<el-table-column prop="" label="有毒元素">
						<el-table-column prop="ingredientName" label="成分">
						</el-table-column>
						<el-table-column prop="percent" label="占比">
						</el-table-column>
					</el-table-column>
					<el-table-column prop="" label="来源地">
					</el-table-column>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import moment from 'moment'
	import SnowflakeId from "snowflake-id";

	let spanArr = []
	let position = 0

	let that
	export default {
		data() {
			return {
				params: {
					year: moment().format('YYYY'),
					month: moment().format('MM'),
					equipmentId: '',
				},
				loading: false,
				productionList: [],
				tableData: [],
				monthDate: "",

			}
		},
		created: function() {},
		mounted: function() {
			that = this

			let monthDate = that.getQueryString("monthDate")
			that.params.ticketId = that.$store.state.token
			that.params.year = monthDate.split("-")[0]
			that.params.month = monthDate.split("-")[1]
			that.pageProductionEquipmentBase()

			//that.getDet()
		},

		methods: {
			remoteMethod(query) {

			},

			//导出危废台账
			exportExcle() {
				let loading = this.$loading({
					lock: true,
					text: '加载中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				let temp = that.params.year + "-" + that.params.month + "-01";

				//let appPath = "http://192.168.0.102:8081/"
				let appPath = "https://www.weifeibangbang.com/"

				window.open(
					appPath + '/productionEquipment/createProductionEquipmentStandingBookExcel?equipmentId=' +
					that.params.equipmentId + "&monthDate=" + temp + '&ticketId=' + that.params.ticketId)
				loading.close();
			},

			pageProductionEquipmentBase() {
				that.ajax({
					url: '/productionEquipment/pageProductionEquipmentBase?pageIndex=1' +
						'&pageSize=50&ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						ticketId: that.params.ticketId,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.productionList = result.data.records
							that.params.equipmentId = that.getQueryString("equipmentId")
							that.getWholeProductionEquipmentDateStandingBookList()
						}
					},
				})
			},

			getWholeProductionEquipmentDateStandingBookList() {
				that.ajax({
					url: '/productionEquipment/getWholeProductionEquipmentDateStandingBookList?ticketId=' + that
						.params.ticketId,
					data: JSON.stringify({
						equipmentId: that.params.equipmentId, // 设施id
						monthDate: that.params.year + "-" + that.params.month + "-01" // 月度时间
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							for (let item of result.data) {
								item.startTimeStr = item.startTimeStr.split(" ")[0]
								item.endTimeStr = item.endTimeStr.split(" ")[0]
							}
							that.tableData = that.handleData(result.data)
							//that.mergeTable(['equipmentName', 'equipmentModel', 'equipmentNo'], that.tableData)

							//console.log(spanArr)
							console.log(that.tableData)
						}
					},
				})
			},

			mergeTable(spanName, tableData) {
				spanName.forEach((arr) => {
					tableData.map((data, index) => {
						//当前为第一行的时候
						if (index === 0) {
							spanArr.push(1)
							position.value = 0
						} else {
							// 如果说当前行与上一行是相同的数据
							if (tableData[index][spanName] === tableData[index - 1][spanName] && tableData[
									index].newId == tableData[index - 1].newId) {
								spanArr[position.value] += 1 //上一行的合并数+1
								spanArr.push(0) //当前行的合并数是0
							} else {
								// 如果说当前行与上一行不相同  那么两个都不进行合并所以返回1，索引变成当前行索引
								spanArr.push(1)
								position.value = index
							}
						}
					})
				})
			},

			//当前列column、当前行号row
			// arraySpanMethod({
			// 	row,
			// 	column,
			// 	rowIndex,
			// 	columnIndex
			// }) {
			// 	/* console.log(row,
			// 		column,
			// 		rowIndex,
			// 		columnIndex) */

			// 	if (columnIndex === 0) {
			// 		if (rowIndex % 3 === 0) {
			// 			return {
			// 				rowspan: 3,
			// 				colspan: 1
			// 			};
			// 		} else {
			// 			return {
			// 				rowspan: 0,
			// 				colspan: 0
			// 			};
			// 		}
			// 	}
			// },

			rowspan() {
				this.tableData.forEach((item, index) => {
					if (index === 0) {
						spanArr.push(1);
						position = 0;
					} else {
						//这里是判断的条件
						if ((this.tableData[index].newId === this.tableData[index - 1].newId)) {
							spanArr[position] += 1;
							spanArr.push(0);
						} else {
							spanArr.push(1);
							position = index;
						}
					}
				});

				//console.log(spanArr)
			},


			//当前列column、当前行号row
			arraySpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				position += 1
				console.log(rowIndex, columnIndex)
				if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 7 || columnIndex ===
					8 || columnIndex === 9 || columnIndex === 10 || columnIndex === 11 || columnIndex === 12 ||
					columnIndex === 13 || columnIndex === 14 || columnIndex === 15) { //第一列
					if (rowIndex % spanArr[rowIndex] === 0) {
						return {
							rowspan: spanArr[rowIndex],
							colspan: 1
						};
					} else {
						return {
							rowspan: 0,
							colspan: 0
						};
					}
				}


			},


			handleData(data) {
				const snowflake = new SnowflakeId({
					mid: 42,
					offset: (2019 - 1970) * 31536000 * 1000
				});

				let newData = []
				for (let item of data) {
					let maxKey = 0
					item.materialList = item.materialList || []
					item.parameterList = item.parameterList || []
					// if (item.materialList.length == 0) item.materialList = [{}]
					// if (item.parameterList.length == 0) item.parameterList = [{}]
					maxKey = item.materialList.length
					if (item.parameterList.length > maxKey) maxKey = item.parameterList.length

					if (maxKey == 0) {
						newData.push(JSON.parse(JSON.stringify(item)))
						spanArr.push(-1)
					} else {
						for (let i = 0; i < maxKey; i++) {
							let newObj = JSON.parse(JSON.stringify(item))
							if (item.materialList[i]) newObj = Object.assign({}, newObj, item.materialList[i])
							if (item.parameterList[i]) newObj = Object.assign({}, newObj, item.parameterList[i])
							newData.push(newObj)
							spanArr.push(maxKey)
						}
					}

				}
				return newData
			}

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.date-item>>>.el-input__prefix,
	.date-item>>>.el-input__suffix {
		display: none !important;
	}

	.date-item>>>.el-input__inner {
		height: 30px !important;
		padding: 0 2px 3px !important;
		font-size: 10px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #333 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 16px !important;

	}

	.el-col-20 {
		height: 60px;
		line-height: 60px;
		overflow-y: scroll;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}
</style>